<template lang="pug">
    div(class="control-password")
        div(class="amount")
            span(:class="{'active-block': activeId == 0 ?true: false }") {{psw[0]}}
            span(:class="{'active-block': activeId == 1 ?true: false }") {{psw[1]}}
            span(:class="{'active-block': activeId == 2 ?true: false }") {{psw[2]}}
            span(:class="{'active-block': activeId == 3 ?true: false }") {{psw[3]}}

</template>

<script>
export default {
  name: "control-password",
  data() {
    return {
      psw: [0, 0, 0, 0],
      activeId: 0
    };
  },
  props: {
    to: { type: String, default: "/" },
    visible: { type: Boolean, default: false },
    activeIndex: 0
  },
  methods: {
    up() {
      var val = this.psw[this.activeId];
      if (val == 9) this.psw[this.activeId] = 0;
      else {
        this.psw[this.activeId] = val + 1;
      }
      this.psw = Object.assign([], this.psw);
    },
    down() {
      var val = this.psw[this.activeId];
      if (val == 0) this.psw[this.activeId] = 9;
      else this.psw[this.activeId] = val - 1;
      this.psw = Object.assign([], this.psw);
    },
    back(){
      if(this.activeId == 0){
        this.$router.push('/menu/menu/index?index=5');
      }else{
        this.activeId --;
      }
    },
    yes() {
      if (this.activeId == 3) {
        this.$emit("submit", this.psw.join(""));
      } else {
        this.activeId = this.activeId == 3 ? 0 : this.activeId + 1;
      }
    }
  }
};
</script>

<style lang="less" scoped>

.control-password {
    text-align: center;
    color: black;
    
    .amount {
      color: black;
      text-align: center;
    }
}
</style>
